<script setup>
import { computed } from 'vue';

const props = defineProps({
  index: {
    type: Object,
    required: true,
    // 期望的格式: { name: '上证指数', code: '000001', price: 3000, change: 1.2, turnover: 3562.8 }
  }
});

const changeClass = computed(() => {
  return props.index.change >= 0 
    ? 'text-red-600 bg-red-50' 
    : 'text-green-600 bg-green-50';
});

const changePrefix = computed(() => {
  return props.index.change >= 0 ? '+' : '';
});

const formatNumber = (num) => {
  return new Intl.NumberFormat('zh-CN').format(num);
};
</script>

<template>
  <div class="market-index-card bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow">
    <div class="flex justify-between items-start mb-2">
      <div>
        <h3 class="font-medium text-gray-900">{{ index.name }}</h3>
        <p class="text-sm text-gray-500">{{ index.code }}</p>
      </div>
      <div :class="['px-2 py-1 rounded-full text-sm font-medium', changeClass]">
        {{ changePrefix }}{{ index.change }}%
      </div>
    </div>
    
    <div class="flex justify-between items-end">
      <div class="text-2xl font-bold text-gray-900">
        {{ formatNumber(index.price) }}
      </div>
      <div class="text-sm text-gray-500">
        成交额：{{ formatNumber(index.turnover) }}亿
      </div>
    </div>
  </div>
</template>

<style scoped>
.market-index-card {
  transition: all 0.3s ease;
}

.market-index-card:hover {
  transform: translateY(-2px);
}
</style>